<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Card style="height:800px">
    <div>
      <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
    </div>
    <div style="text-align: center;margin-top: 36px;">
      <Page :total="collectCondition.total" :current="collectCondition.pageNum" :page-size="collectCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
    </div>
    <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
      <Input v-model="collectCondition.productType" name="productType" style="display:none" />
      <Input v-model="collectCondition.productTypeName" name="productTypeName" style="display:none" />
      <Input v-model="collectCondition.pageNum" name="pageNum" style="display:none" />
      <Input v-model="collectCondition.pageSize" name="pageSize" style="display:none" />
    </Form>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      collectCondition: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        productType: ''
      },
      orderColumns: [
        {
          title: '产品',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '放款笔数',
          key: 'loanNumber',
          align: 'center'
        },
        {
          title: '放款金额',
          key: 'loanAmount',
          align: 'center'
        },
        {
          title: '贷款余额',
          key: 'loanBalance',
          align: 'center'
        },
        {
          title: '逾期1-5（笔数）',
          key: 'overdueNumberOneToFive',
          align: 'center'
        },
        {
          title: '逾期1-5（金额）',
          key: 'overdueAmountOneToFive',
          align: 'center'
        },
        {
          title: '逾期6-30（笔数）',
          key: 'overdueNumberSixToThirty',
          align: 'center'
        },
        {
          title: '逾期6-30（金额）',
          key: 'overdueAmountSixToThirty',
          align: 'center'
        },
        {
          title: '逾期31-60（笔数）',
          key: 'overdueNumberThirtyOneToSixty',
          align: 'center'
        },
        {
          title: '逾期31-60（金额）',
          key: 'overdueAmountThirtyOneToSixty',
          align: 'center'
        },
        {
          title: '逾期61-90（笔数）',
          key: 'overdueNumberSixtyOneToNinety',
          align: 'center'
        },
        {
          title: '逾期61-90（金额）',
          key: 'overdueAmountSixtyOneToNinety',
          align: 'center'
        },
        {
          title: '逾期91+（笔数）',
          key: 'overdueNumberNinetyOneMore',
          align: 'center'
        },
        {
          title: '逾期91+（金额）',
          key: 'overdueAmountNinetyOneMore',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  this.collectCondition.productType = params.row.productType
                  this.collectCondition.productTypeName = params.row.productTypeName
                  this.excelDown()
                }
              }
            }, '下载明细')
          }
        }
      ],
      orderData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.listQuery()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.collectCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.collectCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/loanAfteManage/service/loanAfterList', vm.collectCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.collectCondition.total = data.data.total
      }).catch(er => {

      })
    },
    excelDown () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/collection/loanAfteManage/service/downLoadExcel'
      document.getElementById('exportList').submit()
    }
  }
}
</script>
